<template>
  <div id="mapCity" style="width:600px;height: 700px;border-right:2px  solid #ccc;"></div>
</template>

<script>
  import * as echarts from 'echarts/core';
  import {
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    VisualMapComponent,
    GeoComponent
  } from 'echarts/components';
  import {
    MapChart
  } from 'echarts/charts';
  import {
    CanvasRenderer
  } from 'echarts/renderers';

  echarts.use(
    [TitleComponent, ToolboxComponent, TooltipComponent, VisualMapComponent, GeoComponent, MapChart, CanvasRenderer]
  );
  import {getGeoJson} from '@/api/api'
  export default {
    name: "MapCity",
    props: {
      mapData:{
        type: Array,
        default:[]
      },
      privince:{
        type:String,
        default: "中国"
      }
    },
    data(){
      return {
        codeData:{
          "中国":"100000",
          "北京":"110000"	,
          "天津":"120000",
          "河北":"130000",
          "山西":"140000",
          "内蒙古":"150000",
          "辽宁":"210000",
          "吉林":"220000",
          "黑龙江":"230000",
          "上海":"310000",
          "江苏":"320000",
          "浙江":"330000",
          "安徽":"340000",
          "福建":"350000",
          "江西":"360000",
          "山东":"370000",
          "河南":"410000",
          "湖北":"420000",
          "湖南":"430000",
          "广东":"440000",
          "广西":"450000",
          "海南":"460000",
          "重庆":"500000",
          "四川":"510000",
          "贵州":"520000",
          "云南":"530000",
          "西藏":"540000",
          "陕西":"	610000",
          "甘肃":"620000",
          "青海":"630000",
          "宁夏":"640000",
          "新疆":"650000",
          "台湾":"710000",
          "香港":"810000",
          "澳门":"820000"
        },
        isLoad:false,
        nameMap:{}
      }
    },
    created(){
      this.code = this.codeData[this.privince];
      if(!this.code){
        this.code ="100000";
      }
      this.getJson();
    },methods:{
      filterProName(name){
        if(name){
          if(this.code=="100000"){
            name = name.replace("省","");
            name = name.replace("特别行政区","");
            name = name.replace("自治区","");
            name = name.replace("回族","");
            name = name.replace("维吾尔","");
            name = name.replace("壮族","");
          }
          name = name.replace("市","");
        }
        return name;
      },
      getJson(){
        //areaCode 为省市区的code
        getGeoJson({"code":this.code}).then(res=>{
          //获取的边界数据
          this.mapJson=res;
          if(!this.isLoad){
            this.init()//调用下面的 echarts初始化
          }
          this.nameMap = {};
          this.mapJson.features.map(item => {
            this.nameMap[item.properties.name] = this.filterProName(item.properties.name);
          });
          this.getMapData();
        })
      },init(){
        this.myChart = echarts.init(document.getElementById('mapCity'));
        this.isLoad = true;
      },getMapData(){
        echarts.registerMap('cityMap',this.mapJson,{});  //加载自定义边界数据地图
        if(this.code=="100000"){
          this.mapData.map(item => {
            item.name = this.filterProName(item.name);
          });
        }
        console.log(this.mapData);
        var option = {
          // backgroundColor:'#04222e',// 背景颜色
          title:{
            text: '地级分布',
          },
          tooltip: {
            trigger: 'item',
            formatter:function(params){
              return params.name+"<br/>"+(params.value?params.value:0)+"人";
            }
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center'
          },visualMap: {
            type:"piecewise",
            pieces:[
              {min:0,max:10,color:"#e7f3fc"},
              {min:11,max:100,color:"#cfe7fa"},
              {min:101,max:500,color:"#9accf4"},
              {min:501,max:1000,color:"#70b6ef"},
              {min:1001,max:5000,color:"#4ea5eb"}
            ],
            left: 'center',
            top: 'bottom',
            color: ['#F2602C', '#F9CC2A'],
            calculable: true,
            orient: "horizontal",
            itemHeight: 10,
          },
          series: [
            {
              name: '地图',
              type: 'map',
              mapType: 'cityMap', // 自定义扩展图表类型
              itemStyle:{
                areaColor:"rgb(237,246,253)",
                borderWidth:1,
                borderColor:"#eee"
              },
              zoom: 1.1,
              data: this.mapData,   // 上面添加了 name,value,level,cityCode的数据
              nameMap:this.nameMap
            }
          ]
        }
        this.myChart.setOption(option);
      },changeOption(m,p){
        this.mapData =m;
        this.privince = p;
        this.code = this.codeData[this.privince];
        if(!this.code){
          this.code ="100000";
        }
        this.getJson();
        //this.getMapData();
        console.log(this.mapData);
      }

    }
  }
</script>

<style scoped>

</style>